<template>
	<view class="page-container need-container">
		<!-- 我的需求 -->
		<view class="my-need-box">
			<!-- 1 -->
			<image class="need-box-bg" :src="$img_path('/home/needs/needs-box-bg.png')" mode="widthFix"></image>
			<view class="my-need-content">
				<view class="need-title">
					<text>您的需求</text>
				</view>
				<view class="need-list">
					<view class="need-list-item">
						<view class="need-label">
							<text>服务城市：</text>
						</view>
						<view class="need-content">
							<text v-if="need_info">{{need_info.city}}/{{need_info.district}}</text>
							<text v-else>未知</text>
						</view>
					</view>
					<view class="need-list-item-two">
						<view class="need-label">
							<text>需求类型：</text>
						</view>
						<view class="need-content">
							<text v-if="need_info">{{need_info.fw_type==1 ? '保姆' : '护理员'}}</text>
							<text v-else>未知</text>
						</view>
					</view>
				</view>
				<view class="need-list">
					<view class="need-list-item">
						<view class="need-label">
							<text>用工时长：</text>
						</view>
						<view class="need-content">
							<text v-if="need_info">{{ "小于1个月 " }}</text>
							<text v-else>未知</text>
						</view>
					</view>
					<view class="need-list-item-two">
						<view class="need-label">
							<text>住家情况：</text>
						</view>
						<view class="need-content">
							<text v-if="need_info">{{need_info.zjqk == '1' ? '住家' : need_info.zjqk == '0' ? '均可' : '不住' }}</text>
							<text v-else>未知</text>
						</view>
					</view>
				</view>
				<view class="need-gap">
					
				</view>
				<view class="display-flex alig center mt-24 mmm" @click="toForm">
					<view class="icon-edit">
						<image :src="$img_path('/home/needs/edit.png')" mode="widthFix"></image>
					</view>
					<text>管理我的需求</text>
				</view>
			</view>
		</view>
		<!-- 阿姨列表 -->
		<view class="nannie-list">
			<view class="nannie-list-title">
				<text>推荐阿姨</text>
			</view>
			<view class="nannie-list-item" v-for="(item,index) in bmList" :key="item.id" @click="toDetail(item)">
				<view class="nannie-image">
					<lazy-image :src="$img_base_url(item.tx_image)"></lazy-image>
				</view>
				<view class="nannie-content">
					<view class="nannie-content-name">
						{{item.name}}
						<view class="nannie-content-tags">
							<view class="nannie-content-tag nannie-content-tag-active" v-if="item.rz_image">
								<text>认证证书</text>
							</view>
							<!-- <view class="nannie-content-tag" v-if="item.shz_images">
								<text>背景调查</text>
							</view> -->
						</view>
					</view>
					<view class="nannie-content-info">
						<!-- 54岁 | 河南省 | 初中 -->
						{{item.sex}} | {{$dayjs().diff(item.cs_time,'years')}}岁 | {{$dayjs().diff(item.work_time,'years')}}年工作经验 | 属{{item.sx}} | {{item.xz}}
					</view>
					<view class="nannie-content-remark">
						{{item.js}}
					</view>
				</view>
			</view>
		</view>
		<!-- 固定按钮 -->
		<view class="fixed-box">
			<view class="fixed-btn common-btn-bg-color">
				<text>立即咨询</text>
			</view>
		</view>
	</view>
</template>

<script>
	const FormData = require('@/utils/formdata/index.js')
	import { userBmXq, 
	getBmList } from '@/utils/api/serviceApi.js'
	export default {
		data() {
			return {
				need_info:{},
				bmList:[],
				page:1,
				total:0,
				last_page:0,
			}
		},
		onShow() {
			this.getUserBmXq()
			this.getBmList()
		},
		methods: {
			// 详情
			getUserBmXq(){
				let formData = new FormData()
				formData.append('type','get')
				userBmXq(formData.getData()).then(res=>{
					this.need_info = res.data
				})
			},
			
			// 推荐保姆
			getBmList(){
				getBmList({page:this.page}).then(res=>{
					if(this.page==1){
						this.bmList = res.data.data
					}else{
						this.bmList = [...this.bmList,...res.data.data]
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
				})
			},
			
			toForm(){
				uni.navigateTo({
					url:'/pagesService/editMyNeeds/editMyNeeds'
				})
			},
			toDetail(data){
				uni.navigateTo({
					url:`/pagesService/nannieDetail/nannieDetail?id=${data.id}`
				})
			}
		},
		onReachBottom() {
			if(this.page<this.last_page){
				this.page++
				this.getBmList()
			}
		}
	}
</script>

<style scoped lang="scss">
@import "myNeeds.scss"
</style>
